<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Teng
  Date: 2017-12-27
  Time: 9:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>活动列表</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/style.min.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/font-awesome.min93e3.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/datapicker/datepicker3.css">
    <link href="<%=path%>/favicon.ico" rel="shortcut icon">
    <link href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/public.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/activity.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/marketing.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/style_list.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/custom.css" />

    <link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css">
    <style type="text/css">
        .form-control{width:90%;}
        .myActive{
            border:3px solid #1ab394;
        }
        .yewu_table{
            border:1px solid #ddd;
        }
        .yewu_table2{
            height:120px;
        }
    </style>
</head>
<body>
<div class="row m-b-lg">
    <div class="col-sm-12">
        <div class="tabs-container">

            <div class="tabs-left">
                <ul class="nav nav-tabs">
                    <li class="active"><a aria-expanded="true" href="#tab-1" data-toggle="tab"> 选择活动</a>
                    </li>
                   <!--  <li><a aria-expanded="false" href="#tab-2" data-toggle="tab"> 自定义链接</a>
                    </li> -->
                </ul>
                <div class="tab-content ">
                    <div class="tab-pane active" id="tab-1">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-5">
                                    <div class="input-group">
                                        <input class="form-control" type="text" id="tuijianKeyword"> <span class="input-group-btn"> <button class="btn btn-primary" type="button" onclick="sosuo()">搜索
                                        </button> </span>
                                    </div>
                                </div>
                            </div>
                            <div class="row" id="activity_list">
                            </div>
                            <div class="m_xpages" style="padding:0;">
                                <div class="mian">
                                    <%--<span>显示行数</span>
                                    <select>
                                        <option>6</option>
                                    <option>12</option>
                                    <option>24</option>
                                    </select>--%> <span class="bm_tiao">共__条</span> <span class="bm_ye">页</span> <a
                                        href="javascript:;" class="prev">上一页</a> <a href="javascript:;"
                                                                                    class="next">下一页</a> <span>前往</span> <input type="text" value="1"
                                                                                                                                class="text"> <span>页</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <%-- <div class="tab-pane" id="tab-2">
                        <div class="panel-body">
                            <div class=" form-horizontal" id = "H5">
                                <div class="col-sm-1"></div>
                                <div class="col-sm-11"><h2 align="left">编辑H5展示内容</h2>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-2 control-label"><i style="color:red">*&nbsp;</i>图片</label>
                                    <div class="col-lg-4">bj003
                                        <div class="x_img_sc">
                                            <img id="share_pic" style="width: 100px; height: 100px"src="<%=path%>/images/marketing/img_p.png">
                                        </div>
                                        <form  id='share_image' enctype='multipart/form-data'>
                                            <input type="file" accept="image/gif,image/jpeg,image/x-png" id="inputfile" onchange="fileloadon()" name="filepath"
                                                   style="filter: alpha(opacity = 50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.0; position: absolute; z-index: 99;">
                                            <p style="line-height:80px;color: #bdbdbd;"> &nbsp;&nbsp;(上传图片要求：尺寸为120×120像素，大小10K左右)</p>
                                        </form>
                                    </div>
                                    <div class="clear-shadow col-lg-7"></div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label"><i style="color:red">*&nbsp;</i>标题</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id = "h5_biaoti" name="h5_biaoti" placeholder="请输入标题" >
                                    </div>
                                    <div class="clear-shadow"></div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label"><i style="color:red">*&nbsp;</i>简介</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id = "h5_jianjie" name="h5_jianjie" placeholder="请输入简介" >
                                    </div>
                                    <div class="clear-shadow"></div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label"><i style="color:red">*&nbsp;</i>地址</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id = "h5_url" name="h5_url" placeholder="请输入地址链接，仅支持移动端" >
                                    </div>
                                    <div class="clear-shadow"></div>
                                </div>
                            </div>
                        </div>
                    </div> --%>
                </div>
                <div class="col-sm-12 text-center" style="margin-top:10px;">
                <button class="btn btn-w-m btn-primary" type="button" id="save">完成</button>&nbsp;&nbsp;&nbsp;&nbsp;
                <button class="btn btn-w-m btn-white" type="button" onclick="parent.activityDetailDialog.close().remove()">取消</button>
            </div>
            </div>

        </div>
    </div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.js"></script>
<script type="text/javascript" src="<%=path%>/js/marketing/lengthlimit.js"></script>
<script type="text/javascript" src="<%=path%>/js/marketing/InputLimitedByidandlength.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/artDialog/7.0.0/dialog-plus.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="<%=path%>/js/marketing/public.js"></script>
<script type="text/javascript" src="<%=path%>/js/dateUtils.js"></script>
<script type="text/javascript">
    //
    var access_token=$.cookie('access_token');
    var cid=$.cookie('cid');
    var path = "<%=path%>";
    
    var startIndex=0;
    var pageSize=6;
    var uid=$.cookie('uid');
    var listIndex;
    var yewuActivityList;
    var tuijianActivityList;
    var tempTuijianActivityList = [];   //活动ids，临时
    var activityList_tuijian = [];  //这个是每页显示的6个数据
    var h5share_pic;
    var cardId = parent.cardId;

    //搜索活动
    function sosuo(){
        key_word = $('#tuijianKeyword').val();
        var url = "<%=path%>/activity/ajaxActivityPageList";
        $.post(url,{
            "access_token" : access_token,
            "cid" : cid,
            "uid" : uid,
            "name" : key_word,
            "startIndex" : startIndex,
            "pageSize" : pageSize ,
			"status":1,
			"distinction":0,
        },function(data){
            if(data.status == "300"){
                $("#activity_list").html('');
                func_artdialog("提示","没有查到相关的信息")
            }else{
            	 var msg;
                 msg=data.data;
                 activityList_tuijian = msg;
                 
                 activityhtml2(msg);
                 page(data.totalCount);
            }   
        });
    }
    $(function(){
        tuijian();
    })
    function tuijian(){
        if(parent.alist != undefined){
            tempTuijianActivityList = parent.alist;
        }

        var url = path+ "/activity/ajaxActivityPageList";
        $.post(url, {
            "startIndex" : startIndex,
            "pageSize" : pageSize,
            "cid" : cid,
            "uid" : uid,
            "access_token" : access_token,
			"status":1,
			"distinction":0,
        }, function(data) {
        	if(data.status == "300"){
        		func_artdialog("提示","没有查到相关的信息");
        	}else{
        		var msg;
                msg=data.data;
                activityList_tuijian = msg;
                
                activityhtml2(msg);
                page(data.totalCount);
        	}          
        });
    }
    //显示数据
    function activityhtml2(data) {
        //console.debug(data);
        if (data == undefined) {
            return;
        }
        var html = "";
        for (var i = 0; i<data.length; i++) {
            var count = 0
            if(parent.alist != undefined){
                for(var j = 0; j < parent.alist.length; j++){
                    if(data[i].id == parent.alist[j].id){
                        count++;
                        break;
                    }

                }
            }

            if(count == 0){
                var result = data[i];
                html += '<div class="col-sm-4 yewu_click" style="padding:8px;"><table id = "'+ result.id +'" class="yewu_table yewu_table2"><tr>';
                html += '<td rowspan="2" align="center" style="width: 90px"><img style="width: 70px; height: 70px" class="yewu_pic" src="'+(result.pic==''?result.headPic:result.pic)+'"></td>';
                html += '<td class="yewu_name">' + result.name + '</td>';
                html += '</tr><tr><td class="yewu_createtime"><strong>有效期:</strong>' + (!StringEmpty(result.endTime) ?"无有效期":formatDateTimeYMD(result.endTime)) + '</td></tr></table></div>';
            }else {
                var result = data[i];
                html += '<div class="col-sm-4 yewu_click" style="padding:8px;"><table id = "' + result.id + '" class="myActive yewu_table2"><tr>';
                html += '<td rowspan="2" align="center"  style="width: 90px"><img style="width: 70px; height: 70px" class="yewu_pic" src="'  + (result.pic == '' ? result.headPic : result.pic) + '"></td>';
                html += '<td class="yewu_name">' + result.name + '</td>';
                html += '</tr><tr><td class="yewu_createtime"><strong>有效期:</strong>' + (!StringEmpty(result.endTime) ? "无有效期":formatDateTimeYMD(result.endTime)) + '</td></tr></table></div>';
            }
        }
        $("#activity_list").html(html);
        //imageLoadError();
    }

    $(".m_xpages a.prev").click(function(){
        $('.next').html('<font color="black">下一页</font>');
        if(currentPage > 1){
            currentPage--;
            startIndex -= pageSize;
            if(currentPage == 1){
                $('.prev').html('<font color="#E0E0E0">上一页</font>');
            }
            tuijian();
        }

    });

    $(".m_xpages a.next").click(function(){
        $('.prev').html('<font color="black">上一页</font>');
        if(currentPage < pageCount){
            currentPage++;
            startIndex += pageSize;
            if(currentPage == pageCount){
                $('.next').html('<font color="#E0E0E0">下一页</font>');
            }
            tuijian();
        }
    });

    $(".m_xpages :text").keyup(function(e){
        if(e.keyCode==13){
            var pageGo = $(this).val();
            if(/^[0-9]+$/.test(pageGo)){
                pageGo = Number(pageGo);
                if(pageGo<1 || pageGo>pageCount){
                	func_artdialog("提示",'请输入合法页数');
                }else if(pageGo != currentPage){
                    startIndex = (pageGo -1) * pageSize ;
                    tuijian();
                }
            }else{
            	func_artdialog("提示",'请输入合法页数');
            }
        }
    });
    function page(totalCount) {
        pageCount = totalCount / pageSize;
        if (totalCount % pageSize > 0)
            pageCount++;
        pageCount = parseInt(pageCount);
        currentPage = startIndex / pageSize + 1;
        currentPage = parseInt(currentPage);

        var isPageDisable = "";
        if (currentPage == 1) {
            isPageDisable = "pageDisable";
        } else {
            isPageDisable = "";
        }
        var prev = '<a href="javascript:;" class="prev '+isPageDisable+'">上一页</a>';
        $(".prev").addClass(isPageDisable);

        if (currentPage == pageCount) {
            isPageDisable = "pageDisable";
        } else {
            isPageDisable = "";
        }
        var next = '<a href="javascript:;" class="next '+isPageDisable+'">下一页</a>';
        $(".next").addClass(isPageDisable);

        $(".bm_tiao").text('共' + totalCount + '条');
        $(".bm_ye").text(currentPage + '/' + pageCount + '页');
    }
    $(document).on('click','.yewu_table2',function(){
        var index = $(".yewu_table2").index(this);
        var activity = activityList_tuijian[index];

        if($(this).hasClass("myActive")){
            $(this).removeClass("myActive");
            $(this).addClass("yewu_table");
            for(var i=0; i<tempTuijianActivityList.length; i++){
                var temp = tempTuijianActivityList[i];
                if(temp.id == activity.id){
                    tempTuijianActivityList.splice(i,1);
                    break;
                }
            }
        }else{
            if(tempTuijianActivityList.length>=5){
                alert("最多只能选5个");
            }else{
                $(this).addClass("myActive");
                $(this).removeClass("yewu_table");
                tempTuijianActivityList.push(activity);
            }

        }
    })
    //上传h5活动图片
    function fileloadon() {
        var flag=false;
        $("#share_image").submit(function () {
            if(flag){
                return ;
            }
            flag=true;
            $("#share_image").ajaxSubmit({
                type: "post",
                url: "${pageContext.request.contextPath}/api/uploadfile/file",
                data:{"typename":"filepath"},
                success: function (data1) {
                    h5share_pic=data1.realSavePath;
                    $("#share_pic").attr('src',data1.h5share_pic);
                },
                error: function (msg) {
                	func_artdialog("提示","文件上传失败");
                }
            });
            return false;
        });
        $("#share_image").submit();
    }
    //判断网址
    function urlvilidate(url){
        var Expression=/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
        //var regZuoj = /^(\d{2,4}-?)?\d{7,8}$/;
        var result = Expression.test(url);
        if(!result){
            return false;
        }else{
            return true;
        }
    }
  //自定义弹框
  	function func_artdialog(name,value){
 		var d = dialog({
 			title: name,
 			fixed: true,
 			width: 200,
 	        height:100,
 			content:"<center style='font-size:20px; line-height:100px;'>"+value+"</center>",
 			okValue: "确定",
 			ok: function () {
 				return true;
 			}
 		});
 		d.show();
 	}
    //点击元素选中和取消
    $(document).on('click','#save',function(){
        var tag = $("#tab-2").attr("class");
        if(tag == "tab-pane active"){
            if(tempTuijianActivityList.length<5){
                if($("#h5_biaoti").val() != undefined && $("#h5_biaoti").val() != "" && $("#h5_jianjie").val() != undefined && $("#h5_jianjie").val() != ""
                    && h5share_pic != undefined && h5share_pic != "" && $("#h5_url").val() != undefined && $("#h5_url").val() != ""){
                    if(!urlvilidate($("#h5_url").val())){
                    	func_artdialog("提示","网址请以http开头");
                        return;
                    }
                    var url = path + "/activity/ajaxCreateCustomActivity";
                    $.post(url,{
                        "access_token" : access_token,
                        "cid" : cid,
                        "uid" : uid,
                        "card_id" : cardId,
                        "title" : $("#h5_biaoti").val(),
                        "content" : $("#h5_jianjie").val(),
                        "headPic" : h5share_pic,
                        "webUrl" : $("#h5_url").val(),
                        "distinction" : 2,
                        "name":$("#h5_biaoti").val(),
                        "type":1
                    },function(data){
                        if(data.status == 200){
                            //var json = {'h5_id':data.data,'h5_pic':h5share_pic,'h5_biaoti':$("#h5_biaoti").val(),'h5_jianjie':$("#h5_jianjie").val(),'h5_url':$("#h5_url").val()}
                            var json = {'id':data.data,'head_pic':h5share_pic,'name':$("#h5_biaoti").val(),'content':$("#h5_jianjie").val(),'h5_url':$("#h5_url").val()}
                            tempTuijianActivityList.push(json);
                            parent.alist = tempTuijianActivityList;
                            parent.showinfo2();
                            parent.activityDetailDialog.close().remove();
                        }
                    });
                }else {
                	func_artdialog("提示","请您完善信息");
                }
            }else {
            	func_artdialog("提示","活动数量最多5个");
            }
        }else {
        	 parent.alist = tempTuijianActivityList;
            parent.showinfo2();
            parent.activityDetailDialog.close().remove();      
            }
    })
</script>
</html>
